@charset 'utf-8';

*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}

.wrapper{
    width: 1200px;
    margin: 0 auto;
}

#header{

   .wrapper{

       .read{
padding: 22px 0;
height: 88px;
display: flex;
justify-content: space-between;

        .left{
float: left;
width: 110px;
height: 44px;

a{
display: block;
margin-left: -22px;

img{
height: 48px;
}
}
}

.right{
    display: flex;
    flex-direction: column;
    margin-right: 2px;

    a{
        color: #666;
        font-size: 12px;
        margin-bottom: 5px;
        &:hover{
        color: #f40;
        }

        .icon{
            font-size: 16px;
            margin-right: 2px;
        }
    }
}
}
}
}

#main{
background: url(../img/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg) 50% no-repeat;
position: absolute;
z-index: 9;
top: 88px;
left: 0;
background-size: cover;
width: 100%;
height: 600px;

.wrapper{
    .login-nav{
        position: absolute;
        top: 120px;
        right: 60px;
        width: 350px;
        height: 350px;
        background-color: hsla(0, 0%, 100%, 0.9);

    .login-main{
        padding: 25px 25px 23px;
        width: 350px;
        height: 350px;
        position: relative;

        .login-text{
        margin-top: 4px;
        margin-bottom: 20px;
        display: flex;

        a{
        display: block;
        height: 18px;
        line-height: 5px;
        font-size: 16px;
        color: #3c3c3c;
        margin: 11px 10px 0 0;
        font-weight: 700;
        }

       .active{
            border-bottom: 2px solid #000;
        }
        }
        div{

            .login-form-1{
            margin-bottom: 20px;
            font-size: 14px;
            display: flex;
            
            
    
            .icon-img{
                width: 40px;
                height: 40px;
                columns: #fff;
                background-color: #ccc;
                line-height: 40px;
                text-align: center;
                padding: 3px 2px 0 0;
    
            .icon{
                font-size: 22px;
            }
            }
    
            .input{
            input{
                height: 42px;
                width: 260px;
                border: none;
                padding-left: 10px;
                color: #6c6c6c;
                outline: none;
            }
            }
            }
        .login-form-2{
            margin-bottom: 20px;
            font-size: 14px;
            display: flex;
    
        .icon-img{
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: #ccc;
            line-height: 40px;
            text-align: center;
            padding: 3px 2px 0 0;
    
        .icon{
            font-size: 22px;
        }
        }
        .input{
            input{
                height: 42px;
                width: 260px;
                border: none;
                padding-left: 10px;
                color: #6c6c6c;
                outline: none;
            }
        }
        }
    
        .login-form-3{
        
        button{
            background: #f40;
                font-size: 16px;
                width: 300px;
                height: 42px;
                border-radius: 4px;
                color: #fff;
                cursor: pointer;
                border: 1px solid #ff9000;
                &:hover{
                background: rgb(236,64,1);
                }
        }
        }
    
        .login-form-4{
            margin-top: 16px;
            margin-bottom: 0;
    
        a{
        color: #6c6c6c;
        font-size: 12px;
    
        .icon{
        font-size: 16px;
        margin-right: 3px;
        }
        }
        }
        .login-form-5{
        margin-top: 16px;
        margin-bottom: 0;
        text-align: right;
    
        a{
        color: #6c6c6c;
        margin-left: 6px;
        font-size: 12px;
        }
        }

        .login-form-2-1{
            position: relative;
            margin-bottom: 20px;
            font-size: 14px;
            display: flex;
            
            
    
            .icon-img{
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                position: absolute;
                left: 1px;
                bottom: 1px;
                background-color: #ccc;
    
            .icon{
                font-size: 22px;
            }
            }
            .phone-select-wrap{
                position: absolute;
                left: 40px;
                bottom: 0;

            select{
                color: rgba(0,0,0,.0001);
                background: url(../img/TB1.8ugw.T1gK0jSZFrXXcNCXXa-200-200.png);
                background-size: 24px;
                background-repeat: no-repeat;
                background-position: 48px 8px;
                width: 65px;
                height: 40px;
                border: none;
            }
            }
            .phone-select-wrap:before{
                content: attr(data-content);
                position: absolute;
                top: 0;
                left: 0;
                text-transform: capitalize;
                pointer-events: none;
                line-height: 40px;
                padding-left: 10px;
                color: #3c3c3c;
            }
            .input{
            input{
                color: #6c6c6c;
                border: 1px solid #ccc;
                width: 300px;
                height: 42px;
                outline: none;
                font-size: 14px;
                padding-left: 110px;
            }
            }
            }
        .login-form-2-2{
            margin-bottom: 20px;
            font-size: 14px;
            display: flex;
            position: relative;
    
        .icon-img{
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: #ccc;
            line-height: 40px;
            text-align: center;
            padding: 3px 2px 0 0;
    
        .icon{
            font-size: 26px;
        }
        }
        .input{
            input{
                height: 42px;
                width: 260px;
                border: none;
                padding-left: 10px;
                color: #6c6c6c;
                outline: none;
            }

        }
        
        .btn{
            width: 60px;
            height: 40px;
            position: absolute;
            right: 10px;
            bottom: 0;
            line-height: 40px;

            a{
                color: #3c3c3c;
                font-size: 12px;
            }
        }
        }
    
        .login-form-2-3{
        
        button{
            background: #f40;
                font-size: 16px;
                width: 300px;
                height: 42px;
                border-radius: 4px;
                color: #fff;
                cursor: pointer;
                border: 1px solid #ff9000;
                &:hover{
                background: rgb(236,64,1);
                }
        }
        }
    
        .login-form-2-4{
            margin-top: 16px;
            margin-bottom: 0;
    
        a{
        color: #6c6c6c;
        font-size: 12px;
    
        .icon{
        font-size: 16px;
        margin-right: 3px;
        }
        }
        }
        .login-form-2-5{
        margin-top: 16px;
        margin-bottom: 0;
        text-align: right;
    
        a{
        color: #6c6c6c;
        margin-left: 6px;
        font-size: 12px;
        }
        }
        }
 
    }
    }
}

}

#main{
    .login-main{
        >div{
            display: none;
        }
    
        >.display{
            display: block;
        }
    }
}

.ScanCode{
    .text{
        width: 106px;
        height: 28px;
        padding: 5px 10px;
        border: 1px solid #f3d995;
        background: #fefcee;
        line-height: 16px;
        position: absolute;
        top: 125px;
        right: 120px;
        font-size: 12px;
        color: #ff9000; 
    }

.icon{
    position: absolute;
    top: 7px;
    right: -10px;
    z-index: 9999;
}

.code{
    width: 52px;
    height: 52px;
    position: absolute;
    top: 120px;
    right: 60px;
}
}

#footer {
    background-color: #fff;
    margin-top: 60px;
    padding-bottom: 9px;
    padding-top: 7px;
    font-size: 12px;
    overflow: hidden;
    position: relative;
    top: 600px;

    .wrapper {

        .first {
            padding-top: 7px;

            p {
                margin-bottom: 8px;
                padding-top: 8px;
                line-height: 27px;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                padding-bottom: 8px;

                span {
                    margin: 0 3px;

                    a {
                        color: #6c6c6c;
                        text-decoration: none;
                    }

                    a:hover {
                        color: #FF4400;
                    }
                }

                b {
                    margin: 0 2px;
                    font-weight: 400;
                    color: #ddd;
                }
            }
        }

        .second {

            p:nth-of-type(1) {
                padding-bottom: 8px;
                overflow: hidden;

                span {
                    margin: 0 3px;

                    a {
                        color: #6c6c6c;
                        text-decoration: none;
                    }

                    a:hover {
                        color: #FF4400;
                    }

                }

                b {
                    margin: 0 3px;
                    font-weight: 400;
                    color: #ddd;
                }

                em {
                    margin-left: 30px;
                    font-style: normal;
                    color: #9c9c9c;
                }
            }

            p:nth-of-type(2) {
                padding-bottom: 8px;
                overflow: hidden;

                span {
                    margin: 0 3px;

                    a {
                        color: #6c6c6c;
                        text-decoration: none;
                    }

                    a:hover {
                        color: #FF4400;
                    }
                }

                b {
                    margin: 0 3px;
                    font-weight: 400;
                    color: #ddd;
                }

                .sp1 {
                    color: #9c9c9c;
                }
            }

            p:nth-of-type(3) {
                padding-bottom: 8px;
                overflow: hidden;

                span {
                    margin: 0 3px;
                    color: #9c9c9c;
                }

                b {
                    margin: 0 2px;
                    font-weight: 400;
                    color: #ddd;
                }
            }

            p:nth-of-type(4) {
                padding-bottom: 8px;
                overflow: hidden;

                span {
                    margin: 0 3px;
                    color: #9c9c9c;

                    img {
                        width: 20px;
                        height: 20px;
                    }

                    a {
                        color: #6c6c6c;
                        text-decoration: none;
                    }

                    a:hover {
                        color: #FF4400;
                    }
                }

                b {
                    margin: 0 2px;
                    font-weight: 400;
                    color: #ddd;
                }
            }
        }

        .third {

            .one {
                display: flex;

                span:nth-of-type(1) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 30px;
                        height: 35px;
                        background-position: 0px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }

                span:nth-of-type(2) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 50px;
                        height: 35px;
                        background-position: -80px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }

                span:nth-of-type(3) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 83px;
                        height: 35px;
                        background-position: -140px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }

                span:nth-of-type(4) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 250px;
                        height: 35px;
                        background-position: 0px -18px;
                        background-image: url('../img/123123.png_250x250');
                    }
                }

                span:nth-of-type(5) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 105px;
                        height: 35px;
                        background-position: -650px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }

                span:nth-of-type(6) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 82px;
                        height: 35px;
                        background-position: -345px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }

                span:nth-of-type(7) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 97px;
                        height: 35px;
                        background-position: -761px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }

                span:nth-of-type(8) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 249px;
                        height: 35px;
                        background-position: -884px 0px;
                        background-image: url('../img/aaaaaaaaaaaaaa.jpg');
                    }
                }
            }

            .two {
                height: 71px;
                display: flex;

                span:nth-of-type(1) {
                    margin: 0 4px;
                    overflow: hidden;
                    margin-top: 20px;

                    a {
                        display: block;
                        margin-right: 15px;
                        width: 249px;
                        height: 35px;
                        background-position: 0px 0px;
                        background-image: url('../img/quanguo.jpg');
                    }
                }

                span:nth-of-type(2) {
                    margin: 0 4px;
                    overflow: hidden;

                    a {
                        display: block;

                        img {
                            width: 148px;
                            height: 71px;
                        }
                    }
                }
            }
        }
    }
}